<template>
    <div id="a1">
        <div id="m">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="菜谱大全" name="first">
                    <pre><a href="##">夏季食谱</a>   <a href="##">主食</a>   <a href="##">热菜</a>   <a href="##">早餐</a>    <a href="##">小吃</a>   <a href="##">酱泡腌菜</a>   <a href="##">更多</a></pre>
                </el-tab-pane>
                <el-tab-pane label="食材大全" name="second">
                    <pre><a href="##">西红柿</a>   <a href="##">小龙虾</a>  <a href="##">金针菇</a>  <a href="##">鸡蛋</a>   <a href="##">螃蟹</a>    <a href="##">鸡翅</a>   <a href="##">更多</a></pre>
                </el-tab-pane>
                <el-tab-pane label="健康养生" name="third">
                    <pre><a href="##">瘦身美容</a>   <a href="##">驱寒保暖</a>   <a href="##">痛经</a>  <a href="##">食疗食补</a>   <a href="##">气血双补</a>     <a href="##">失眠</a>   <a href="##">更多</a><a href="##">更多</a></pre>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div></div>
        <div id="e">
            <el-row>
                <el-col :span="6" >
                    <el-card :body-style="{ padding: '20px'}" href="index.html"  shadow="hover" >
                        <a href="##"  class="image  ee1"></a>
                        <div style="padding: 14px;" class="zi_ti">
                            <a href="##">水煮鱼</a>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6" >
                    <el-card :body-style="{ padding: '20px'}" href="index.html" shadow="hover">
                        <a href="##"  class="image   ee2"></a>
                        <div style="padding: 14px;" class="zi_ti">
                            <a href="##">酸辣粉</a>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6" >
                    <el-card :body-style="{ padding: '20px'}" href="index.html"   shadow="hover">
                        <a href="##" class="image  ee3"></a>
                        <div style="padding: 14px;" class="zi_ti">
                            <a href="##">青椒肉丝</a>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6" >
                    <el-card :body-style="{ padding: '20px'}" href="index.html"   shadow="hover">
                        <a href="##"  class="image  ee4"></a>
                        <div style="padding: 14px;" class="zi_ti">
                            <a href="##">水煮肉片</a>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div id="g">
            <el-row>
                <el-col :span="6" >
                    <el-card :body-style="{ padding: '20px'}" href="index.html"  shadow="hover" >
                        <a href="##"  class="image  gg1"></a>
                        <div style="padding: 14px;" class="zi_ti">
                            <a href="##">豆花饭</a>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6" >
                    <el-card :body-style="{ padding: '20px'}" href="index.html"   shadow="hover">
                        <a href="##"  class="image   gg2"></a>
                        <div style="padding: 14px;" class="zi_ti">
                            <a href="##">尖椒鸡</a>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6" >
                    <el-card :body-style="{ padding: '20px'}" href="index.html"  shadow="hover">
                        <a href="##" class="image  gg3"></a>
                        <div style="padding: 14px;" class="zi_ti">
                            <a href="##" >小面</a>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6" >
                    <el-card :body-style="{ padding: '20px'}" href="index.html"  shadow="hover">
                        <a href="##"  class="image  gg4"></a>
                        <div style="padding: 14px;" class="zi_ti">
                            <a href="##">凉拌猪耳朵</a>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Cord",
        data(){
            return {
                activeIndex: '1',
                activeIndex2: '1',
                activeName: 'second'
            }
        },
        methods: {
            handleSelect (key, keyPath) {
                console.log(key, keyPath)
            },
            handleClick (tab, event) {
                console.log(tab, event)
            }
        }
    }
</script>
<style scoped>

    #a1{
        position: relative;
        left: 10px;
        font-size: 14px;
    }

    #a1{
        color: #eaffcd;
    }
    a{
        text-decoration: none;
    }

    /*-------------------AAA-----------------------------*/

    /*---------------BBB---------------------------*/

    /*--------------------------------*/
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 600px;
        margin: 0;

    }

    /*-----------------------------DDD-------------------*/
    .zi_ti{
        text-align: center;
    }
    .image {
        width: 290px;
        height: 200px;
        display: block;
    }
    .ee1{
        background-image: url("img/shuizhuyu.jpg");background-size:290px 200px;
    }
    .ee2{
        background-image: url("img/suanlafen.jpg");background-size:290px 200px;
    }
    .ee3{
        background-image: url("img/rousi.jpg");background-size:290px 200px;
    }
    .ee4{
        background-image: url("img/roupian.jpg");background-size:290px 200px;
    }

    /*----------------EEE--------------------*/

    /*----------------FFF---------------------*/
    .gg1{ background-image: url("img/douhua.jpg"); background-size:290px 200px; }
    .gg2{  background-image: url("img/laziji.png"); background-size:290px 200px;}
    .gg3{ background-image: url("img/xiaomian.jpg"); background-size:290px 200px;}
    .gg4{ background-image: url("img/jia_2.jpg"); background-size:290px 200px;}
    #e,#g{
        width: 1150px;
        height: 320px;
        position: relative;
    }
    /*----------------ggg-----------------*/

    #m{
        width: 1150px;
        height: 160px;
        position: relative;

    }
    /*---------MMM-----NNN----------*/
    #top{
        clear: both;
        width: 60px;
        height:25px;
        color: white;
        background-color: darkred;
        border-radius: 20px;
        float: right;
        text-align: center;
    }
    #yi{
        width: 1150px;
    }

</style>